<template>
    <div class="ql_body">
        <div class="searchHeader">
            <div class="search_title">机构随机</div>
            <div class="inputFlex">
                <mySelect label="地区：" placeholder="请选择地区" :options="areaOption" v-model="searchParam.direction" />
                <myInput label="机构名称：" placeholder="请选择机构名称" v-model="searchParam.projectId" />
                <mySelect label="资质等级：" placeholder="请选择资质等级" :options="allOptionLsit.institutionLevel"
                    v-model="searchParam.direction" />
                <el-button type="primary" :icon="Search" @click.prevent="getTable()">查询</el-button>
                <el-button :icon="Refresh" @click.prevent="reset()">重置</el-button>
            </div>
            <div class="buttonClass">
                <div style="display: flex;align-items: center;">
                    <el-button type="primary">机构随机</el-button>
                    <el-button type="primary" @click="addRow">添加</el-button>
                    <el-upload v-model:file-list="fileList" class="uploadClass"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1"
                        :on-exceed="handleExceed">
                        <el-button type="primary">导入</el-button>
                    </el-upload>
                    <el-button type="primary" @click="templateUpload">模板下载</el-button>
                    <el-button type="danger"
                        @click="deleteRowList('institutionRandom/deleteInstitutionRandom')">删除</el-button>
                </div>
            </div>
        </div>

        <div class="table_card">
            <el-table :data="tableData" border stripe class="tableClass" :header-cell-style="headercellStyle"
                ref="tableRef" :cell-style="cellStyle">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="areaName" label="地区" width="150"></el-table-column>
                <el-table-column prop="institutionName" label="机构名称" width="200"></el-table-column>
                <el-table-column prop="qualificationLevel" label="资质等级" width="130"></el-table-column>
                <el-table-column prop="certificateNo" label="证书编号" width="230"></el-table-column>
                <el-table-column prop="certificateValidityDate" label="证书有效期" width="130"></el-table-column>
                <el-table-column prop="address" label="详细地址" width="200"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <div>
                            <el-button size="small" @click.prevent="updateRow(scope.row)">编辑</el-button>
                            <el-button size="small" type="danger"
                                @click.prevent="deleteRow(scope.row, 'institutionRandom/deleteInstitutionRandom')">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagintionClass">
                <el-pagination layout="prev, pager, next" v-model:current-page="current" :total="total" background />
            </div>
        </div>
        <el-dialog v-model="dialogVisible" width="73%" :title="addOrupdate ? '新增' : '编辑'" destroy-on-close>
            <jigouform :addOrupdate="addOrupdate" :rowData="rowData" :disabled="disabled" @closeDialog="closeDialog" />
        </el-dialog>
    </div>
</template>

<script setup>
import { useTable } from "@/utils/hook";
import { Search, Refresh } from "@element-plus/icons-vue";
import mySelect from "@/components/element/mySelect.vue";
import myInput from "@/components/element/myInput.vue";
import ssxCascader from "@/components/element/ssxCascader.vue";
import jigouform from "./components/jigouform.vue";

const {
    tableData,
    searchParam,
    total,
    getTable,
    headercellStyle,
    cellStyle,
    cityChange,
    areaCode,
    addRow,
    reset,
    current,
    dialogVisible,
    addOrupdate,
    updateRow,
    deleteRow,
    tableRef,
    deleteRowList,
    getAllOptionList,
    allOptionLsit,
    disabled,
    casChange,
    areaOption,
    getareaOption,
    rowData,
    closeDialog
} = useTable('institutionRandom/getInstitutionRandomList');
let formLine = ref({})
let ssxOptions = ref([
    {
        label: '上行',
        value: 'A',
    },
    {
        label: '下行',
        value: 'B',
    },
])
const templateUpload = () => {
    let url = import.meta.env.VITE_BASE_URL + 'institutionRandom/downLoadItutionExcel'
    window.open(url)
}

onMounted(() => {
    getTable();
    getareaOption()
    getAllOptionList('institutionLevel', 'institutionLevel')
});




</script>

<style lang="less" scoped>
@import "@/utils/dataBase.less";
</style>